function Util() {
    this.numberMap = {1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '七', 8: '八', 0: '零', 9: '九'};
}

Util.prototype.numberToText = function (number) {
    var num;
    if (number < 10) {
        return this.numberMap[number];
    }
    if (number < 20) {
        num = number % 10;
        return '十' + (!!num ? this.numberMap[num] : '')
    }
    if (number < 100) {
        num = number % 10;
        return this.numberMap[Math.floor(number / 10)] + '十' + (!!num ? this.numberMap[num] : '')
    }
    return 0
};

var util = new Util();

function getTranslateXY(x, r, range) {
    var deg = ((360 / range) * x) * Math.PI / 180;
    return {
        x: r * Math.cos(deg),
        y: r * Math.sin(deg),
        rotate: x / range * 360
    }
}

function getTranslateXY2(x, r, range, type, noAnimation) {
    var deg = ((360 / range) * x) * Math.PI / 180;
   /* if (x === range - 1) {
        console.log(444444444, x);
        window.setTimeout(function () {
            render(type)
        }, 1000)
    }
    if (noAnimation === type) {
        return {
            x: r * Math.cos(deg),
            y: r * Math.sin(deg),
            rotate: x / range * 360 + 360
        };
    }*/
    type === TIME.SECOND && console.log('x', x)
    return {
        x: r * Math.cos(deg),
        y: r * Math.sin(deg),
        rotate: x / range * 360,
        animation:x === 0
    };
}

var TIME = {
    MONTH: 1, DATE: 2, WEEK: 3, HOUR: 4, MINUTE: 6, SECOND: 7
}

function Circle(arg) {
    this.center = {
        x: (arg && arg.x) || '50%',
        y: (arg && arg.y) || '50%'
    };
    this.r = arg && arg.r || 100;
    this.range = arg && arg.range || 12;
    this.unit = arg && arg.unit || '';
    this.id = arg && arg.id || Math.random();
    this.preUnit = arg && arg.preUnit || '';
    this.specialMoment = arg && arg.specialMoment || {}
}

Circle.prototype.appendCircle = function () {
    var html = document.createDocumentFragment();
    for (var i = 0; i < this.range; i++) {
        var div = document.createElement('div');
        var translateXY = getTranslateXY(i + 1, this.r, this.range);
        if (this.specialMoment[i] !== undefined) {
            div.innerText = this.specialMoment[i]
        } else {
            div.innerText = this.preUnit + util.numberToText(i + 1) + this.unit;
        }
        div.setAttribute('class', this.id);
        div.setAttribute('style',
            'position:absolute;top:' + this.center.x + ';left:' + this.center.y
            + ';transform:translate(calc(-50% + ' + translateXY.x.toFixed(2) + 'px),calc(-50% + ' + translateXY.y.toFixed(2) + 'px))' + 'rotate(' + translateXY.rotate + 'deg)');
        html.appendChild(div);
    }
    var d = document.createElement('div');
    d.setAttribute('id', this.id + 'Container');
    d.setAttribute('class', 'container');
    d.appendChild(html);
    document.querySelector('.panel').appendChild(d);
    html = null;
    d = null;
};


var c1 = new Circle({
    r: 70,
    id: 'month',
    unit: '月'
});
var c2 = new Circle({
    r: 160,
    range: 31,
    unit: '号',
    id: 'day'
});
var c3 = new Circle({
    r: 240,
    range: 7,
    unit: '',
    preUnit: '星期',
    id: 'week'
});
var c4 = new Circle({
    r: 300,
    range: 24,
    unit: '点',
    id: 'hour',
    specialMoment: {
        23: '零点'
    }
});
var c5 = new Circle({
    r: 390,
    range: 60,
    unit: '分',
    id: 'minute',
    specialMoment: {
        59: ''
    }
});
var c6 = new Circle({
    r: 470,
    range: 60,
    unit: '秒',
    id: 'second',
    specialMoment: {
        59: ''
    }
});
c1.appendCircle();
c2.appendCircle();
c3.appendCircle();
c4.appendCircle();
c5.appendCircle();
c6.appendCircle();
// c6.appendCircle();

// window.requestAnimationFrame(render);

function render(noAnimation) {
    var data = new Date();
    document.querySelector('#time').innerHTML = new Date().toLocaleTimeString();
    document.querySelector('#monthContainer').setAttribute('style',
        'transform:rotate(' + -getTranslateXY2(data.getMonth() + 1, c1.r, c1.range, TIME.MONTH, noAnimation).rotate + 'deg)');
    document.querySelector('#weekContainer').setAttribute('style',
        'transform:rotate(' + -getTranslateXY2(data.getDay(), c3.r, c3.range, TIME.WEEK, noAnimation).rotate + 'deg)');
    document.querySelector('#dayContainer').setAttribute('style',
        'transform:rotate(' + -getTranslateXY2(data.getDate(), c2.r, c2.range, TIME.DATE, noAnimation).rotate + 'deg)');
    document.querySelector('#hourContainer').setAttribute('style',
        'transform:rotate(' + -getTranslateXY2(data.getHours(), c4.r, c4.range, TIME.HOUR, noAnimation).rotate + 'deg)');
    document.querySelector('#minuteContainer').setAttribute('style',
        'transform:rotate(' + -getTranslateXY2(data.getMinutes(), c5.r, c5.range, TIME.MINUTE, noAnimation).rotate + 'deg)');
    document.querySelector('#secondContainer').setAttribute('style',
        'transform:rotate(' + -getTranslateXY2(data.getSeconds(), c6.r, c6.range, TIME.SECOND, noAnimation).rotate + 'deg);' + ( getTranslateXY2(data.getSeconds(), c6.r, c6.range, TIME.SECOND, noAnimation).animation? ' transition: all .0s' : ''));
}

// render()
window.setInterval(render, 1000)
